<template>
  <div>
    <van-nav-bar title="10条回复" @click-left="onClickLeft">
      <template #left>
        <van-icon name="cross" size="18" />
      </template>
    </van-nav-bar>
    <div class="comment">
      <div class="comment_userinfo">
        <div class="userinfo_left">
          <img :src="replyListTwo.info.avatar" alt="" />
          <p>{{ replyListTwo.info.nickname }}</p>
        </div>
        <div class="userinfo_right"></div>
      </div>
      <p class="content">
        {{ replyListTwo.content }}
      </p>
      <div class="footer">
        <div class="footer_left">
          <!-- <p>{{ replyListTwo.reply_num }}回复<van-icon name="arrow" /></p> -->
          <span>{{ formatime }}</span>
        </div>
        <div class="footer_right">
          <van-icon
            name="good-job"
            :color="isLike ? '#900' : '#666'"
            @click="commentlike"
          /><span class="sum">{{replyListTwo.like_count }}</span>
          <van-icon name="ellipsis" />
        </div>
      </div>
    </div>
    <van-divider />

    <van-nav-bar>
      <template #left>
        <h4>全部回复</h4>
      </template>
    </van-nav-bar>

    <van-popup v-model="popupShow" position="bottom">
      <div class="popup_content">
        <van-field
          v-model="content_input"
          rows="4"
          autosize
          type="textarea"
          maxlength="1000"
          :placeholder="contentPlaceholder"
          show-word-limit
        />
        <div style="width: 100%">
          <van-button size="large" type="primary" @click="addreplyCount"
            >发布</van-button
          >
        </div>
      </div>
    </van-popup>
<div class="list_reply">
    <slot></slot>
</div>

    <div class="footer_input">
      <div class="input">
        <i class="iconfont icon-shuru1"></i>
        <input
          type="text"
          name=""
          id=""
          placeholder="写评论..."
          @click="showReplyPopup"
        />
      </div>
      <div class="icon">
        <van-icon name="chat-o" class="icons" />
        <i class="iconfont icon-shoucang1 icons"></i>
        <i class="iconfont icon-dianzan1 icons"></i>
        <van-icon name="share-o" class="icons" />
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import formatTime from "@/utils/time";
import { commentlike, recommentlike } from "@/api/api";

export default {
  components: {},
  data() {
    return {
      content_input: "",
      comment_type: 1,
      popupShow: false,
      contentPlaceholder: "留下你的精彩的神评再走吧！",
      isLike: false,
    };
  },
  methods: {
    // 点击评论弹出输入框，编辑内容
    showReplyPopup() {
      this.popupShow = true;
    },
    onClickLeft() {
      this.$emit("close");
    },
    addreplyCount() {
      let { comment_type, content_input: content } = this;
      let val = {
        comment_type,
        content,
      };
      this.$store.dispatch("getReplyAll", val);
      this.popupShow = false;
      this.content_input = "";
    },
    // 评论点赞
    commentlike() {
      let comment_id = sessionStorage.getItem("reply_comment_id");
      let { uid: user_id } = localStorage;
      if (!this.isLike) {
        commentlike(user_id, comment_id).then((res) => {
          this.$toast(res.data.msg);
          this.isLike = true;
        });
      } else {
        recommentlike(user_id, comment_id).then((res) => {
          this.$toast(res.data.msg);
          this.isLike = false;
        });
      }
    },
  },
  computed: {
    ...mapState(["replyListTwo"]),
    formatime() {
      return formatTime(this.replyListTwo.create_time);
    },
  },
  created() {
    // console.log(this.replyListTwo.info);
    this.isLike = JSON.parse(sessionStorage.getItem("replyIndexList")).is_like;
  },
  props: {
    content: String,
    nickname: String,
    is_like: Boolean,
    like_count: Number,
    time: Number,
    _id: String,
    reply_num: Number,
  },
};
</script>

<style lang="less" scoped>
::v-deep .van-nav-bar .van-icon {
  color: #333;
}
::v-deep .van-icon {
  margin-left: 20px;
}
::v-deep .van-hairline--bottom::after {
  border: none;
}

.list_reply{
  padding: 0 20px;
}

.footer_input {
  display: flex;
  padding: 10px 16px;
  position: fixed;
  bottom: -1px;
  left: 0;
  background-color: #fff;
  border-top: 1px solid rgb(244, 244, 244);
  .input {
    position: relative;
    flex: 4;
    display: flex;
    input {
      width: 100%;
      background-color: rgb(243, 243, 243);
      padding: 8px 0 8px 35px;
      border-radius: 15px;
      &::placeholder {
        font-size: 14px;
        font-family: "微软雅黑";
      }
    }
    .iconfont {
      position: absolute;
      top: 8px;
      left: 8px;
    }
  }
  .icon {
    flex: 6;
    text-align: center;
    height: 35px;
    line-height: 35px;
    .icons {
      margin: 0px 16px 10px 10px;
      font-size: 24px;
    }
  }
}

.comment {
  //   height: calc(100vh -60px);
  //   &:last-child {
  //     margin-bottom: 100px;
  //   }
  padding: 5px 25px;
  .comment_userinfo {
    line-height: 30px;
    padding-top: 16px;
    display: flex;
    .userinfo_left {
      flex: 1;
      display: flex;
      img {
        width: 30px;
        height: 30px;
        border-radius: 15px 15px;
        margin-left: -15px;
        margin-right: 10px;
      }
    }
    .userinfo_right {
      text-align: right;
      flex: 1;
    }
  }

  .content {
    margin: 10px 0 10px 24px;
    width: 90%;
    word-wrap: break-word;
  }

  .footer {
    display: flex;
    justify-content: space-between;
    padding: 0 0 0 18px;
    .footer_left {
      display: flex;
      p {
        font-size: 12px;
        height: 25px;
        line-height: 25px;
        padding: 0 5px;
        margin-right: 15px;
        border-radius: 15px;
        background-color: rgb(240, 240, 240);
        font-family: "微软雅黑";
      }
      >span {
        font-size: 12px;
        line-height: 25px;
        color: rgb(186, 186, 186);
      }
    }
  }
}
</style>
